<template>
  <div class="info-table">
    <span>家庭基本信息列表</span>
    <div class="table">
      <vxe-table
        ref="infoTable"
        :data="infoData"
        border
        highlight-hover-row
        :checkbox-config="{ checkStrictly: true }"
        @checkbox-change="selectChangeEvent"
      >
        <!-- 展开列 -->
        <vxe-table-column type="seq" width="60" />
        <vxe-table-column type="checkbox" width="50" />
        <vxe-table-column field="XM" title="户主姓名" width="100" />
        <vxe-table-column field="ZJHM" title="户主身份证" width="180" />
        <vxe-table-column field="DHHM" title="本人电话" width="110" />
        <vxe-table-column field="House" title="门牌号码" width="110" />
        <vxe-table-column field="JZDZ" title="家庭地址" width="260" />
        <vxe-table-column field="recordTime" title="建档日期" width="100" />
        <vxe-table-column field="GRDAID" title="家庭档案号" width="180" />

        <vxe-table-column
          title="操作"
          align="center"
          width="180"
          show-overflow
          fixed="right"
        >
          <template slot-scope="scope">
            <vxe-button
              status="primary"
              icon="vxe-icon--edit-outline"
              size="mini"
              @click="editBtn(scope)"
              >修改</vxe-button
            >
            <vxe-button
              status="danger"
              icon="vxe-icon--error"
              size="mini"
              @click="removeBtn(scope)"
              >删除</vxe-button
            >
          </template>
        </vxe-table-column>
      </vxe-table>
      <!-- 分页功能 -->
      <!-- <vxe-pager background :current-page.sync="page.currentPage" :page-size.sync="page.pageSize" :total="page.totalResult" :layouts="['PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']">
              </vxe-pager> -->
    </div>
  </div>
</template>

<script>
export default {
  props: ["infoData"],
  data() {
    return {
      currentlySelected: []
    }
  },
  methods: {
    // 点击修改
    editBtn(scope) {
      // console.log(scope)
      const itemData = {
        dialogType: "edit",
        scope: scope
      }
      this.$emit("editData", itemData)
    },
    // 根据id删除对应的数据
    removeBtn(Data) {
      const index = Data.$rowIndex
      this.$emit("removeData", index)
    },
    // 家庭基本信息复选框选中
    selectChangeEvent(data) {
      const { checked, row } = data
      let { ROW_ID } = row
      if (!checked) {
        ROW_ID = ""
      }

      this.$refs.infoTable.clearCheckboxRow()
      this.$refs.infoTable.setCheckboxRow(
        this.infoData.filter(v => v.ROW_ID === ROW_ID),
        true
      )
    }
  }
}
</script>
<style lang="scss" scoped>
.info-table {
  width: 20px;
  margin-right: 10px;
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  .table {
    flex: 1;
    height: 100%;
  }
  .vxe-table {
    width: 100%;
  }
}
</style>
